{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}
{%- capture fill_container -%}
  {%- if data.is_width_fill -%}
    container_fill
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

<div class="block_video_image_text" id="block_video_image_text-{{blockId}}" style="--pc-height: {{data.pc_height }} ;--mobile-height: {{data.mobile_height}};">
  <div class="{{fill_container}} h-full">
    <div class="content_wrap h-full overflow-hidden relative {% unless data.is_width_fill %}public_radius{% endunless %}">
		{% if data.video_url.model != '' %}
			<div id="iframe_{{blockId}}"></div>
		  {% else %}
			<div class="video_empty h-full flex justify-center items-center">
			  <span class="relative z-10">
				{% include "icon_video" , width:"100",height:"100" %}
			  </span>
			</div>
		  {% endif %}
	  
		  <div class="video_mask absolute w-full h-full left-0 top-0 z-[5]" style="--bg: {{data.mask_color}};"></div>
	  
		  <div class="text_box absolute w-full h-full left-0 top-0 box-border flex {{data.position_algin}} z-20">
			<div class="text_content md:p-[50px] xl:p-[70px] p-[24px] max-w-[800px]" style="--text-color: {{data.text_color}};">
			  {% if data.subtitle != '' %}
				<div class="text_subtitle uppercase mb-[27px] public_subtitle">{{data.subtitle}}</div>
			  {% endif %}
			  {% if data.title != '' %}
				<div class="text_title uppercase public_title mb-5">{{data.title}}</div>
			  {% endif %}
			  {% if data.detail != '' %}
				<div class="text_detail mb-5">{{data.detail}}</div>
			  {% endif %}
			  {% if data.btn_text != '' %}
				<div class="btn_wrap" style="--btn-color: {{data.btn_color}};--btn-bg: {{data.btn_bg}};">
				  {% include 'btn',link: data.link,btn_text: data.btn_text %}
				</div>
			  {% endif %}
			</div>
		  </div>
	</div>

  </div>
</div>


<script>
$(function() {
  {% if data.video_url.id %}
    moi.youtubeVideoPlay('iframe_{{blockId}}', {
      height: document.querySelector('#block_video_image_text-{{blockId}} .text_box').clientHeight,
      width: document.querySelector('#block_video_image_text-{{blockId}} .text_box').clientWidth,
      videoId: "{{data.video_url.id}}",
      playerVars: {
        mute: 1,
        controls: 0
      },
      events: {
        onReady: function (event) {
          event.target.playVideo();
        },
        onStateChange: function (event) {
          if (event.data === 0) {
            event.target.playVideo();
          }
        }
      }
    });
  {% endif %}
})
</script>

{% schema %}
{
	"tag": "",
	"class": "block_video_image_text",
	"icon": "icon-shipinliebiao",
	"is_global": false,
	"name": {
		"zh_CN": "视频图文",
		"en_US": "Video text"
	},
	"max_blocks": "0",
	"blocks": [],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "副标题",
				"en_US": "Subtitle"
			},
			"default": "Tell your story",
			"id": "subtitle"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"default": "Background video",
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Description"
			},
			"id": "detail",
			"default": "Use a video to get a customer's attention"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"default": "",
			"id": "btn_text"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "link"
		},
		{
			"type": "card_video",
			"error": {
				"zh_CN": "输入地址错误",
				"en_US": "Wrong address entered"
			},
			"rule": [
				"youtube"
			],
			"label": {
				"zh_CN": "视频链接",
				"en_US": "Video link"
			},
			"placeholder": {
				"zh_CN": "请输入Youtube视频的URL",
				"en_US": "Please enter the URL of the Youtube video"
			},
			"info": {
				"zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX",
				"en_US": "Only support Youtube, please enter the complete links such as: https://www.youtube.com/watch?v=XXXXXX"
			},
			"id": "video_url"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "PC端高度",
				"en_US": "PC height"
			},
			"default": "550px",
			"id": "pc_height",
			"option": [
				{
					"label": {
						"zh_CN": "450px",
						"en_US": "450px"
					},
					"value": "450px"
				},
				{
					"label": {
						"zh_CN": "550px",
						"en_US": "550px"
					},
					"value": "550px"
				},
				{
					"label": {
						"zh_CN": "650px",
						"en_US": "650px"
					},
					"value": "650px"
				},
				{
					"label": {
						"zh_CN": "750px",
						"en_US": "750px"
					},
					"value": "750px"
				},
				{
					"label": {
						"zh_CN": "全屏",
						"en_US": "Full screen"
					},
					"value": "100vh"
				}
			]
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "移动端高度",
				"en_US": "Mobile height"
			},
			"default": "300px",
			"id": "mobile_height",
			"option": [
				{
					"label": {
						"zh_CN": "250px",
						"en_US": "250px"
					},
					"value": "250px"
				},
				{
					"label": {
						"zh_CN": "300px",
						"en_US": "300px"
					},
					"value": "300px"
				},
				{
					"label": {
						"zh_CN": "400px",
						"en_US": "400px"
					},
					"value": "400px"
				},
				{
					"label": {
						"zh_CN": "500px",
						"en_US": "500px"
					},
					"value": "500px"
				},
				{
					"label": {
						"zh_CN": "全屏",
						"en_US": "Full screen"
					},
					"value": "100vh"
				}
			]
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "文本位置",
				"en_US": "Text position"
			},
			"default": "center",
			"id": "position_algin",
			"option": [
				{
					"label": {
						"zh_CN": "上左",
						"en_US": "Up left"
					},
					"value": "top-left"
				},
				{
					"label": {
						"zh_CN": "上中",
						"en_US": "Upper middle"
					},
					"value": "top-center"
				},
				{
					"label": {
						"zh_CN": "上右",
						"en_US": "Top right"
					},
					"value": "top-right"
				},
				{
					"label": {
						"zh_CN": "中左",
						"en_US": "Center left"
					},
					"value": "center-left"
				},
				{
					"label": {
						"zh_CN": "中中",
						"en_US": "Center center"
					},
					"value": "center-center"
				},
				{
					"label": {
						"zh_CN": "中右",
						"en_US": "Center right"
					},
					"value": "center-right"
				},
				{
					"label": {
						"zh_CN": "下左",
						"en_US": "Lower left"
					},
					"value": "bottom-left"
				},
				{
					"label": {
						"zh_CN": "下中",
						"en_US": "Lower middle"
					},
					"value": "bottom-center"
				},
				{
					"label": {
						"zh_CN": "下右",
						"en_US": "Lower right"
					},
					"value": "bottom-right"
				}
			]
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"id": "text_color",
			"label": {
				"zh_CN": "文字颜色",
				"en_US": "Text color"
			},
			"default": "#ffffff"
		},
		{
			"type": "card_color",
			"id": "btn_color",
			"label": {
				"zh_CN": "按钮文字颜色",
				"en_US": "Button text color"
			},
			"default": "#000000"
		},
		{
			"type": "card_color",
			"id": "btn_bg",
			"label": {
				"zh_CN": "按钮背景颜色",
				"en_US": "Button background color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(255,255,255,1)"
		},
		{
			"type": "card_color",
			"id": "mask_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,.1)"
		}
	],
	"default": {
		"settings": {
			"is_width_fill": false,
			"subtitle": "Tell your story",
			"title": "Background video",
			"detail": "Use a video to get a customer's attention",
			"btn_text": "",
			"link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"video_url": {
				"value": "",
				"id": "",
				"model": ""
			},
			"pc_height": "550px",
			"mobile_height": "300px",
			"position_algin": "center-center",
			"text_color": "#ffffff",
			"btn_color": "#000000",
			"btn_bg": "rgba(255,255,255,1)",
			"mask_color": "rgba(0,0,0,.1)"
		},
		"blocks": []
	}
}
{% endschema %}
